<template>
  <div>
    <!-- {{ selectedAddress }} -->
    <nut-cell title="省市区" :desc="text" is-link @click="showAddress">
      <template #icon>
        <span class="c-[#f00]">*</span>
      </template>
    </nut-cell>
    <nut-address v-model:visible="showPopup" v-model:value="selectedAddress" :province="provinceList" :city="cityList" :country="countryList" @change="onChange" @close="close" custom-address-title="请选择所在地区"></nut-address>
  </div>
</template>

<script setup>
import { RectDown, RectUp } from '@nutui/icons-vue';
import { defineProps, defineEmits } from 'vue';
import { useVisaStore } from '@/store/modules/visa/index.js'
import { ref, reactive } from 'vue';
import { showToast } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/toast/style';
const showPopup = ref(false);
const props = defineProps({
  value: {
    type: [String, Number],
  },
  text: {
    type: [String, Number],
  },
  is_require: {
    type: Boolean,
    default: true
  },
  columns: {
    type: Array,
  },
  placeholder: {
    type: String,
  }
})
const emit = defineEmits(['openPopUp', 'confirm', 'update:province_code', 'update:county_code'])
const _popUp = ref('')
const isDown = ref(true)
const selectValue = ref('')
const selectedAddress = ref('')
let popUpColumns = ref([])
const open = () => {
  _popUp.value.open(props.value)
  popUpColumns.value = props.columns
}
const confirm = (item) => {
  emit('update:value', item.selectedOptions[0].value)
  emit('update:text', item.selectedOptions[0].text)
  emit('confirm', item.selectedOptions[0].value)
}
let provinceList = ref([{ id: 99, name: '西安' }])
let cityList = ref([{ id: 99, name: '西安' }])
let countryList = ref([{ id: 11, name: '冷水灘' }])
const address = reactive({
  provinceList: [],
  city: [
    { id: 99, name: '西安' }
  ],
  country: [
    { id: 22, name: '冷水滩区' }
  ],
});

const showAddress = () => {
  let addressList = useVisaStore().addressList
  let _provinceList = []
  addressList.forEach((item) => {
    _provinceList.push({ id: item.key, name: item.value })
  })
  provinceList.value = _provinceList
  showPopup.value = true;
};

let province_code = ''; let city_code = ''; let county_code = ''
const onChange = (cal) => {
  let id = cal?.value?.id
  if (!id) {
    // showToast.text('没有id');
    showPopup.value = true
    return
  }
  let addressList = useVisaStore().addressList
  if (cal.custom === 'province') {
    let _cityList = []
    addressList.forEach(item => {
      if (id == item.id) {
        _cityList = item.children.map((item) => {
          return { id: item.id, name: item.name }
        })
        province_code = item.id
      }
    })
    cityList.value = _cityList
    showPopup.value = true
  } else if (cal.custom === 'city') {
    let _countryList = []
    addressList.forEach(item => {
      if (item.children && item.children.length) {
        item.children.forEach(childItem => {
          if (id == childItem.id) {
            _countryList = childItem.children.map((item) => {
              return { id: item.id, name: item.name }
            })
            city_code = childItem.id
          }
        })
      }
    })
    countryList.value = _countryList
    showPopup.value = true

  } else if (cal.custom === 'country') {
    console.log('%c [ cal.custom ]-106', 'font-size:13px; background:#a2c26c; color:#e6ffb0;', cal.custom)
    // if (!province_code) {
    //   showToast.text('没有省id');
    //   return
    // }
    // if (!city_code) {
    //   showToast.text('没有市id');
    //   return
    // }
    // if (!id) {
    //   showToast.text('没有区id');
    //   return
    // }
    // emit('update:province_code', province_code)
    // emit('update:city_code', city_code)
    // emit('update:county_code', id)
    // showPopup.value = false
  }
  showPopup.value = true
};
const text = ref('选择地址');
const close = (val) => {
  text.value = val.data.addressStr;
  emit('update:province_code', val.data.province.id)
  emit('update:city_code', val.data.city.id)
  emit('update:county_code', val.data.country.id)
};
</script>

<style lang="scss" scoped>
</style>